<template>
  <div class="wrap">
    <a-form :form="form" layout="inline" class="member_wrap">
      <a-form-item label="请选择申请的会员类别：" v-bind="formItemLayout" class="member_role">
        <a-radio-group v-decorator="['memberRole',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}会员类别` }]}]" style="width: 800px;">
          <a-radio value="teacher">申请加入学科委员会并授课</a-radio>
          <a-radio value="common">申请成为志愿者参与组织活动或提供公益服务</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item class="subject_wrap" label="所申请学科委员会：" style="width: 100%;" v-if="form.getFieldValue('memberRole') === 'teacher'">
        <a-checkbox-group v-model="checkedList" :options="options" v-decorator="['subject',{rules: [{ required: form.getFieldValue('memberRole') === 'teacher', message: `请选择申请学科` }]}]"  class="flex" />
      </a-form-item>
      <a-form-item :label="$t('common.name')" v-bind="formItemLayout">
        <a-input v-decorator="['name',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.name')}` }]}]" :placeholder="$t('common.name')" />
      </a-form-item>
      <a-form-item label="性别" v-bind="formItemLayout">
        <a-select v-decorator="['gender', { rules: [{ required: true, message: `请选择性别` }] }]" placeholder="性别">
          <a-select-option value="male">男</a-select-option>
          <a-select-option value="female">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('common.mobile')" v-bind="formItemLayout">
        <a-input v-decorator="['phone',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.mobile')}` }]}]" :placeholder="$t('common.mobile')" />
      </a-form-item>
      <a-form-item :label="$t('common.email')" v-bind="formItemLayout">
        <a-input v-decorator="['email',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.email')}` }]}]" :placeholder="$t('common.email')"/>
      </a-form-item>
      <a-form-item label="出生日期" v-bind="formItemLayout">
        <a-date-picker v-decorator="['birth',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}出生日期` }]}]" placeholder="出生日期" style="width: 100%" />
      </a-form-item>
      <a-form-item label="所在城市" v-bind="formItemLayout">
        <LOCATION v-decorator="['city',{rules: [{ required: true, message: `请选择所在城市` }]}]"></LOCATION>
      </a-form-item>
      <a-form-item label="学校名称" v-bind="formItemLayout">
        <a-input v-decorator="['school',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}学校名称` }]}]" placeholder="学校名称" style="width: 100%"/>
      </a-form-item>
      <a-form-item label="所在学院" v-bind="formItemLayout" v-if="form.getFieldValue('memberRole') === 'student'">
        <a-input v-decorator="['college',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}所在学院` }]}]" placeholder="所在学院" />
      </a-form-item>
      <!-- <a-form-item label="专业" v-bind="formItemLayout" v-if="form.getFieldValue('memberRole') === 'student'">
        <a-input v-decorator="['major',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}专业` }]}]" placeholder="专业"/>
      </a-form-item> -->
      <a-form-item label="学号" v-bind="formItemLayout" v-if="form.getFieldValue('memberRole') === 'student'">
        <a-input v-decorator="['studentId',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}学号` }]}]" placeholder="学号"/>
      </a-form-item>
      <template>
        <!-- <a-form-item label="职工编号" v-bind="formItemLayout">
          <a-input v-decorator="['teacherId',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}职工编号` }]}]" placeholder="职工编号"/>
        </a-form-item> -->
        <a-form-item label="职称" v-bind="formItemLayout">
          <a-input v-decorator="['proTitle',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}职称` }]}]" placeholder="职称"/>
        </a-form-item>
        <a-form-item label="职务" v-bind="formItemLayout">
          <a-input v-decorator="['job',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}职务` }]}]" placeholder="职务"/>
        </a-form-item>
        <a-form-item label="业务专长" v-bind="formItemLayout">
          <a-input v-decorator="['major',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}业务专长` }]}]" placeholder="业务专长"/>
        </a-form-item>
        <br />
        <a-form-item label="选课子弟个数" v-bind="formItemLayout" class="child_wrap">
          <a-input-number v-decorator="['childrenNum',{rules: [{ required: false, message: `${$t('common.pleaseEnter')}选课子弟个数` }]}]"/>
        </a-form-item>
        <span style="line-height: 40px;">（有几个选几个，多个须不同名）</span>
        <template v-for="i in form.getFieldValue('childrenNum')">
          <div :key="i" class="mt20">
            <div class="mb10" style="margin-left: 60px;font-weight: bold;">选课子弟{{i}}信息</div>
            <a-form-item class="mb10" :label="$t('common.name')" v-bind="formItemLayout">
              <a-input v-decorator="['child_name_' + i,{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.name')}` }]}]" :placeholder="$t('common.name')" />
            </a-form-item>
            <a-form-item class="mb10" label="性别" v-bind="formItemLayout">
              <a-select v-decorator="['child_gender_' + i, { rules: [{ required: true, message: `请选择性别` }] }]" placeholder="性别">
                <a-select-option value="male">男</a-select-option>
                <a-select-option value="female">女</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item class="mb10" label="出生日期" v-bind="formItemLayout">
              <a-date-picker v-decorator="['child_birth_' + i,{rules: [{ required: true, message: `${$t('common.pleaseEnter')}出生日期` }]}]" placeholder="出生日期" style="width: 100%" />
            </a-form-item>
            <a-form-item class="mb10" label="联系电话" v-bind="formItemLayout">
              <a-input v-decorator="['child_phone_' + i,{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.mobile')}` }]}]" :placeholder="$t('common.mobile')" />
            </a-form-item>
          </div>
        </template>
      </template>
      <a-row class="mt20 text_center">
        <a-form-item class="mt20 text_center">
          <a-button type="primary" @click="submit" style="width: 150px;height:40px;">提交</a-button>
        </a-form-item>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { createAccount } from '@/api/config'
import LOCATION from '@/components/formComponents/Location/city'
export default {
  name: 'member',
  components: { LOCATION },
  data () {
    return {
      moment,
      form: this.$form.createForm(this),
      formItemLayout: '',
      memberRole: 'teacher',
      options: [
        { value: 'science', label: '科学(对应理、工和医学部)' },
        { value: 'humanity', label: '人文(对应人文社科学部)' },
        { value: 'foreignLanguage', label: '外语(对应外国语学院)' },
        { value: 'art', label: '艺术(对应艺术学院)' },
        { value: 'sports', label: '体育(对应体育教研部)' }
      ],
      checkedList: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted () {
    this.form.setFieldsValue({
      memberRole: 'teacher'
    })
  },
  methods: {
    async createData (params) {
      let res = await createAccount(params)
      if (res.code === 200) {
        this.$message.success('提交成功，审核结果请关注邮件')
      } else {
        this.$message.error(res.message)
      }
    },
    async submit () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          let childList = []
          for (var i = 1; i <= values.childrenNum; i++) {
            let obj = {}
            Object.keys(values).forEach(k => {
              if (k.includes('child_') && k.split('_')[2] === String(i)) {
                obj[k.split('_')[1]] = (k.split('_')[1] === 'birth' ? moment(values[k]).format('YYYY-MM-DD') : values[k])
              }
            })
            childList.push(obj)
          }
          let valuesCopy = JSON.parse(JSON.stringify(values))
          Object.keys(valuesCopy).forEach(k => {
            if (k.includes('child_')) {
              delete valuesCopy[k]
            }
          })
          valuesCopy.childList = childList
          valuesCopy.birth = '' + moment(valuesCopy.birth).format('YYYY-MM-DD')
          valuesCopy.subject = valuesCopy.subject && valuesCopy.subject.join()
          delete valuesCopy.childrenNum
          console.info(valuesCopy)
          valuesCopy.role = 'ROLE_VENDOR'
          valuesCopy.account = valuesCopy.email
          await this.createData(valuesCopy)
          this.$router.push('/front/dashboard')
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../styles/var.styl'
.blue_text
  color var(--blue-500)
.managerLimit
  display inline-block
  margin-top 48px
.member_wrap
  padding 20px
  width: 900px;
  margin: 0 auto;
  :deep(.ant-form-item-label)
    width 90px
    text-align: left;
  .child_wrap :deep(.ant-form-item-label)
    width 150px
  :deep(.ant-form-item-control-wrapper)
    width 300px
  .child_wrap :deep(.ant-form-item-control-wrapper)
    width 50px
    margin-right 20px
  .member_role
    width 100%
    margin-bottom 15px
  .member_role :deep(.ant-form-item-label)
    width 170px
.subject_wrap
  width 600px
  margin-bottom 10px
  .ant-checkbox-group
    display flex
    flex-wrap wrap
  :deep(.ant-form-item-label)
    width 170px
  .ant-checkbox-group
    width 600px
</style>
